<script setup lang="ts">
import { reactive, ref } from 'vue';
import type { PropType } from 'vue'
import { useRouter } from 'vue-router';
import type { Cate } from '../types/types.d.ts'

const props = defineProps({
    data: {
        type: Array as PropType<Cate[]>,
        required: true
    }
})
// 按行分隔，每行4个，变成二维数组
const rowDatas = reactive(props.data.reduce((prev, curr, index) => {
    const row = Math.floor(index / 4)
    if (!prev[row]) {
        prev[row] = []
    }
    prev[row].push(curr)
    return prev
}, [] as Cate[][]))

const router = useRouter()
const routerTo = (path: string) => {
    router.push(path)
}
</script>

<template>
    <div class="cates">
        <div class="cate-title unselectable">
            <div class="title-1">
                <div class="title-en font-xbs">
                    FIND ARTICAL
                </div>
                <div class="title-zh font-xbs">
                    栏  目
                </div>
            </div>
            <!-- <img src="/assets/imgs/yiti.png" class="title-2" alt="" style="height: 66px;" /> -->
        </div>
        <div class="cate-line font-xbs"></div>
        <img src="/assets/imgs/arrow.png" class="cate-arrow unselectable" alt="" style="height: 20px;" />
        <div class="cate-list">
            <div class="cate-row" v-for="(item, index) in rowDatas" :key="index">
                <div class="cate-item unselectable" v-for="(cate, index2) in item" :key="index2"
                    @click="router.push('/cate/' + cate.id)">
                    <img :src="cate.img" alt="" style="height: 40px;" />
                    <div class="cate-name font-xbs">{{ cate.name }}</div>
                </div>
            </div>
        </div>
        <div class="cate-more font-xbs unselectable" @click="routerTo('/moretopics')">
            了解更多
        </div>
    </div>
</template>

<style scoped>
.title-2 {
    position: relative;
    top: 10px;
}

.title-zh {
    font-size: 30px;
}

.title-en {
    letter-spacing: 1px;
    color: #f59009;
    font-size: 18px;
}

.title-1 {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.cate-title {
    display: flex;
}

.cate-arrow {
    margin-top: 30px;
}

.cate-more {
    margin-top: 30px;
    color: #f59009;
    font-size: 24px;
    cursor: pointer;
}

.cate-name {
    font-size: 20px;
    font-weight: 600;
}

.cate-item {
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0 5px #aaa;
    background-color: white;
    gap: 10px;
}

.cate-item:hover {
    background-color: #f0f0f0;
}

.cate-row {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(242, 233, 223);
    gap: 40px;
    height: 150px;
}

.cate-list {
    display: flex;
    flex-direction: column;
    margin-top: 30px;
    gap: 30px;
}


.cate-line {
    margin-top: 20px;
    height: 1px;
    background-color: #fbdcbe;
    width: 50%;
}

.cates {
    padding: 30px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
</style>